<mat-card-content class="plugin-info">
    <section>
        <div *ngIf="expand; else textTemplate">
            <mat-form-field>
                <mat-label fxFlex>{{ "Browse a Collection" | translate}}</mat-label>
                <mat-select [(ngModel)]="selectedRepo" (selectionChange)="switchRepo($event)"
                    ix-auto ix-auto-type="select" ix-auto-identifier="Browse a Collection">
                    <mat-option *ngFor="let repo of availableRepo" [value]="repo.git_repository">
                        {{repo.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <button mat-flat-button id="plugin-refresh-button" (click)="getPlugin(false)" class="plugin-button"
                ix-auto ix-auto-type="button" ix-auto-identifier="REFRESH INDEX">
                <mat-icon>refresh</mat-icon>
                {{ "REFRESH INDEX" | translate }}
            </button>
        </div>
        <ng-template #textTemplate>
            <span><span class="subtitle">{{ 'Available Plugins' | translate }}</span> - {{plugins?.length}} {{' official plugins' | translate}}</span>
        </ng-template>

        <span fxFlex></span>
        <button mat-icon-button (click)="updatePreference()">
            <mat-icon *ngIf="expand">expand_less</mat-icon>
            <mat-icon *ngIf="!expand">expand_more</mat-icon>
        </button>
    </section>
    <div fxLayout="row wrap" fxLayoutAlign="space-around center" *ngIf="expand && selectedPlugin">
        <div fxFlex fxFlex.xs="100">
            <div>
                <img class="plugin-img" height="150" [src]="selectedPlugin.icon" alt="{{selectedPlugin.name}}" />
            </div>
        </div>
        <div fxFlex="40" fxFlexOffset="3" fxFlex.xs="100">
            <p class="plugin-description">{{selectedPlugin.description}}</p>
        </div>
        <div fxFlex="25" fxFlexOffset="3" fxFlex.xs="100">
            <div class="plugin-vinfo">
                <p *ngIf="selectedPlugin.official">Official Plugin <mat-icon class="official-plugin">verified_user</mat-icon></p>
                <p>Version: {{selectedPlugin.version}}</p>
                <p>Installed Instances: {{installedPlugins[selectedPlugin.plugin] || 0}}</p>
            </div>
            <button mat-flat-button id="plugin-install-button" (click)="install(selectedPlugin);" class="plugin-button" [disabled]="!parent.conf.activatedPool" 
                ix-auto ix-auto-type="button" ix-auto-identifier="INSTALL">
                {{ "INSTALL" | translate }}
            </button>
        </div>
    </div>
</mat-card-content>
<mat-button-toggle-group class="plugin-buttons" [(ngModel)]='selectedPlugin' *ngIf="expand">
    <ng-container *ngFor="let plugin of plugins; let index">
        <mat-button-toggle [value]='plugin' ix-auto ix-auto-type="button" ix-auto-identifier="{{plugin.name}}">
            <figure>
                <img class="plugin-img" height="40" [src]="plugin.icon" alt="{{plugin.plugin}} icon" />
                <figcaption>{{plugin.name}}</figcaption>
            </figure>
        </mat-button-toggle>
    </ng-container>
</mat-button-toggle-group>